<template>
	<view>
		<view class="terz-tip">
			<text>请输入本人信用卡进行提额认证</text>
		</view>
		<xh-form-input title="姓名" placeholder="请输入持卡人姓名" v-model="name">
			<template #right>
				<image class="scan-icon" src="/static/scan_icon.png" mode="aspectFit" @tap="showSelectImage(1)"></image>
			</template>
		</xh-form-input>
		<xh-form-input title="身份证号" placeholder="请输入持卡人身份证号" v-model="idCard"></xh-form-input>
		<xh-form-input title="信用卡卡号" placeholder="请输入银行卡卡号" v-model="bankCardNo">
			<template #right>
				<image class="scan-icon" src="/static/scan_icon.png" mode="aspectFit" @tap="showSelectImage(2)"></image>
			</template>
		</xh-form-input>
		<xh-form-input title="手机号" placeholder="请输入银行预留手机号" v-model="phone" :maxCount="11"></xh-form-input>
		<view class="submit-button" @tap="submitAction">提交认证</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	import { getImageInfoByOcr,submitLimitAuth,searchLimitAuthResult} from '@/config/api.js'
	//姓名
	const name = ref('')
	//身份证号
	const idCard = ref('')
	//银行卡号
	const bankCardNo = ref('')
	//手机号
	const phone = ref('')
	
	/* 选择照片
	type: 1：身份证正面照片 2：银行卡
	 */
	const showSelectImage = async (type)=>{
		try{
			const res = await uni.$tools.uploadImage()
			getOcrInfo(type,res)
		}catch(e){
			uni.$tools.showToast(e)
		}
	}
	// 获取ocr识别信息
	const getOcrInfo = async (type,url)=>{
		let params = {}
		params.fileUrl = url
		if(type == 1){
			params.apiType = '01'
			params.frontOrBack = 'F'
		}
		else{
			params.apiType = '02'
		}
		const res = await getImageInfoByOcr(params)
		const ocrInfo = JSON.parse(res.result.data)
		if (type == 1) {
			// 身份证正面信息
			const ocrRes = ocrInfo.words_result
			if(uni.$u.test.isEmpty(ocrRes)){
				return
			}
			name.value = ocrRes['姓名'].words
			idCard.value = ocrRes['公民身份号码'].words
		}
		else{
			const ocrRes = ocrInfo.result
			if(uni.$u.test.isEmpty(ocrRes)){
				return
			}
			bankCardNo.value = uni.$tools.clearSpace(ocrRes.bank_card_number)
		}
	}
	//提交提额认证
	const submitAction = ()=>{
		if(uni.$u.test.isEmpty(name.value)){
			uni.$tools.showToast('请输入持卡人姓名')
			return
		}
		else if(uni.$u.test.isEmpty(idCard.value)){
			uni.$tools.showToast('请输入持卡人身份证号')
			return
		}
		else if(uni.$u.test.isEmpty(bankCardNo.value)){
			uni.$tools.showToast('请输入信用卡卡号')
			return
		}
		else if(uni.$u.test.isEmpty(phone.value)){
			uni.$tools.showToast('请输入银行预留手机号')
			return
		}
		else{
			let params = {}
			params.certName = uni.$tools.clearSpaceAndEnter(name.value)
			params.certNo = uni.$tools.clearSpaceAndEnter(idCard.value)
			params.cardNo = uni.$tools.clearSpaceAndEnter(bankCardNo.value)
			params.phoneNo = uni.$tools.clearSpaceAndEnter(phone.value)
			
			submitLimitAuth(params).then(res=>{
				uni.$pop.show({
					type: 'alert',
					config: {
						title: '提额成功',
						desc: '具体额度可点击“额度费率”查看',
						buttons: ['我知道了']
					}
				}, (value) => {
					if(value == '我知道了'){
						uni.navigateBack()
					}
				})
			}).catch(err=>{
				
			})
		}
	}
	
</script>

<style lang="scss" scoped>
.terz-tip{
	font-size: 28rpx;
	padding:30rpx;
	color: $xh-subtitle-color;
}
.scan-icon{
	width: 28rpx;
	height: 28rpx;
	padding: 20rpx 0 20rpx 20rpx;
}
.submit-button{
	box-sizing: border-box;
	background-color: $xh-theme-color;
	height: 88rpx;
	line-height: 88rpx;
	border-radius: 44rpx;
	text-align: center;
	color: white;
	font-size: 32rpx;
	margin: 54rpx 75rpx 0;
}
</style>
